<template>
  <nut-popup v-model:visible="modelValue" pop-class="dialog-textarea-box">
    <view class="dialog">
      <text class="hint">{{ hint }}</text>
      <textarea class="textarea" :placeholder="placeholder" v-model="content"></textarea>
      <view class="handle">
        <view class="cancel" @click="handleCancel">{{ cancelText }}</view>
        <view class="sure" @click="handleSure(content)">{{ sureText }}</view>
      </view>
    </view>
  </nut-popup>
</template>
<script lang="ts">
import { reactive, toRefs } from '@vue/reactivity';
export default {
  name: "yh-dialog-textarea",
  props: {
    modelValue: {
      default: false,
    },
    hint:{
      default:''
    },
    textAreaContent:{
      default:''
    },
    placeholder:{
      default:''
    },
    cancelText:{
      default:'取消'
    },
    sureText:{
      default:'确认'
    },
    handleCancel: {
      default: function () {},
    },
    handleSure: {
      default: function () {},
    },
  },
  setup(props){
    console.log(props)
    const state = reactive({
      content:""
    })
    return{
      ...toRefs(state)
    }
  }
};
</script>
<style lang="scss">
.dialog-textarea-box {
  width: calc(100% - 72px);
  border-radius: 4px;
  .dialog {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .hint {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #262626;
      padding: 40px 0 0 0;
    }
    .textarea {
      width: calc(100% - 40px);
      height: 76px;
      padding: 8px;
      font-size: 13px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #cccccc;
      line-height: 20px;
      background: #f7f7f7;
      border-radius: 4px;
      margin: 16px 0 40px;
    }
    .handle {
      width: 100%;
      display: flex;
      flex-direction: row;
      border-top: 1px solid #eeeeee;
      .cancel {
        flex: 1;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #333333;
        line-height: 20px;
        padding: 16px 0;
      }
      .sure {
        flex: 1;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #dc2734;
        line-height: 20px;
        border-left: 1px solid #eeeeee;
        padding: 16px 0;
      }
    }
  }
}
</style>
